<template>
    <u-list
        @scrolltolower="scrolltolower"
    >
        <u-sticky offsetTop="-44">
            <view class="search">
                <u-search
                    :show-action="true"
                    :clearabled="false"
                    actionText="搜索"
                    :animation="true"
                    placeholder="请输入商品关键字"
                    :actionStyle="{
                        color: '#999999',
                        fontSize: '26rpx',
                    }"
                    :inputStyle="{
                        height: '66rpx',
                        background: '#F4F4F4',
                        fontSize: '24rpx',
                    }"
                    v-model="inputValue"
                    :searchIconSize="30"
                    searchIcon="https://img.ionepin.com/0c07f455a605a49fadf905ef7b5128b016fcd17f.png"
                    @search="searchSubmit()"
                    @focus="focusInput()"
                    @custom="searchSubmit()"
                ></u-search>
            </view>
        </u-sticky>
        <view class="container">
            <view v-show="hotWords">
                <view class="info">
                    <view class="title">历史搜索</view>
                    <view class="ul">
                        <view v-for="(item, k) in historySearch" :key="k" @click="words(item)" class="item">{{ item }}</view>
                    </view>
                </view>
                <view class="info">
                    <view class="title">热门搜索</view>
                    <view class="ul">
                        <view v-for="(item, k) in hotSearch" :key="k" @click="words(item.keyname)" class="item">{{ item.keyname }}</view>
                    </view>
                </view>
            </view>
            <view class="product" v-show="productShow">
                <u-row
                    customStyle="flex-wrap: wrap;margin:30rpx 0;align-items:stretch;"
                    :gutter="15"
                    v-if="total > 0"
                >
                    <u-col
                        span="6"
                        v-for="(item, index) in productList"
                        :key="index"
                    >
                        <product-item :info="item"></product-item>
                    </u-col>
                </u-row>
                <u-empty
                    icon="https://img.ionepin.com/fccd5144df6618f73c4b9828ab988674f2723360.png"
                    width="290rpx"
                    height="290rpx"
                    textSize="28rpx"
                    marginTop="120rpx"
                    text="没有搜索结果"
                    v-else
                >
                </u-empty>
                <u-loadmore
                    v-if="total > 0"
                    :status="statusLoading"
                    fontSize="28rpx"
                    marginTop="15rpx"
                    marginBottom="15rpx"
                    line
                />
            </view>
        </view>
    </u-list>
</template>
<script>
import { getHotKeywork, getSearchProduct} from "@/config/api"
import ProductItem from "@/components/ProductItem"
export default {
    components: {
        ProductItem
    },
    data() {
        return {
            inputValue: null,
            historySearch: [],
            hotSearch: [],
            hotWords: true,
            listQuery: {
                page: 1,
                list_rows: 8,
                keyworker: null
            },
            productList: [],
            total: 0,
            productShow: false,
        }
    },
    async onLoad() {
        var res = uni.getStorageSync("search")
        if (res) {
            this.historySearch = res
        }
        this.hotSearch = await getHotKeywork()
    },
    computed: {
        statusLoading() {
            if (this.total <= this.productList.length) {
                return "nomore"
            } else {
                return "loading"
            }
        }
    },
    methods: {
        searchSubmit() {
            if (this.historySearch.length == 10) {
                this.historySearch.shift()
            }
            this.historySearch.push(this.inputValue)
            this.historySearch = this.uniqueArr(this.historySearch)
            uni.setStorageSync("search", this.historySearch)
            this.getData()
        },
        async getData(more = false) {
            this.listQuery.keyworker = this.inputValue
            const res = await getSearchProduct(this.listQuery)
            if (more) {
                this.productList = [...this.productList, ...res.items]
            } else {
                this.productList = res.items
                this.productShow = true
                this.hotWords = false
            }
            this.total = res.total
        },
        words(hot) {
            this.inputValue = hot
            this.getData()
        },
        uniqueArr(arr) {
            return Array.from(new Set(arr))
        },
        focusInput() {
            this.hotWords = true
            this.productShow = false
        },
        scrolltolower() {
            if (this.total > this.productList.length) {
                this.listQuery.page += 1
                this.getData(true)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .search {
        background: #ffffff;
        padding: 30rpx;
    }
    .container {
        padding: 0 30rpx 30rpx 30rpx;
        .info {
            margin-top: 40rpx;
            .title {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-bottom: 20rpx;
            }
            .ul {
                display: flex;
                flex-wrap: wrap;
                .item {
                    margin-bottom: 20rpx;
                    min-width: 90rpx;
                    height: 50rpx;
                    border: 1rpx solid #B6B6B6;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    text-align: center;
                    line-height: 50rpx;
                    margin-right: 20rpx;
                    padding: 0 20rpx;
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
</style>
